!function(){
    var duration = 50

    $('.actions').on('click','button',(e)=>{
        let $button = $(e.currentTarget)
        let speed = $button.attr('data-speed')
        $button.addClass('active')
        .siblings('.active').removeClass('active')
        switch(speed){
            case 'slow':
            duration = 100
            break
            case 'normal':
            duration =50
            break
            case 'fast':
            duration = 10
            break
        }
    })
    function writeCode(prefix,code,fn){
        let $container = $('#code')
        let $styleTag = $('#styleTag')
        console.log($container)
        console.log($styleTag)
        let n = 0
        let id
        id = setTimeout(function run(e){
            n+=1
            $container[0].innerHTML = code.substring(0,n)
            $styleTag[0].innerHTML = code.substring(0,n)
            $container[0].scrollTop = $container[0].scrollHeight
            if(n < code.length){
                id = setTimeout( run, duration);
            }else{
                fn && fn.call()
            }
        }, duration);
    }
    let code = `
    /*今天来画一个那撸多*/
    /*画上一个头*/
    .naruto {
        width: 330px;
        height: 330px;
        border-radius: 50%;
        border: 15px solid #a55b41;
        overflow: hidden;
        position: relative;
      }
      /*做头发*/
      .hair {
        background-color: #dcd768;
        height: 90px;
        border-bottom: 5px solid #cec968;
      }
      /*木叶忍者的护额*/
      .headband {
        height: 60px;
        background-color: #4d4747;
      }
      .headband .plate {
        width: 150px;
        height: 45px;
        background-color: #cecece;
        border-radius: 10px;
        margin: 0 auto;
        padding: 3px 0;
        -webkit-transform: translateY(6px);
        transform: translateY(7.5px);
        overflow: hidden;
      }
      .headband .plate::after {
        content: "";
        width: 85px;
        height: 60px;
        display: block;
        margin-left: 100px;
        margin-top: -5px;
        background-color: #b5b9c3;
        transform: skew(-45deg);
      }
      /*画上一张脸*/
      .face {
        position: absolute;
        top: 0;
        z-index: -1;
        width: 300px;
        height: 300px;
        background-color: #f2c9be;
        border-radius: 50%;
        border: 5px solid #dfab9d;
      }
      /*画上眼睛*/
      .eye {
        position: absolute;
        top: 180px;
        width: 35px;
        height: 35px;
        background-color: #fff;
        border: 5px solid #638aaa;
        border-radius: 50%;
      }
      .eye.left {
        left: 25%;
      }
      .eye.right {
        right: 25%;
      }
      /*画上一嘴巴*/
      .mouth {
        position: absolute;
        bottom: 10%;
        left: 50%;
        width: 75px;
        height: 37.5px;
        margin-left: -37px;
        border-bottom-left-radius: 37.5px;
        border-bottom-right-radius: 37.5px;
        background-color: #e89e8a;
      }
      /*最后是六道须*/
      .naruto .whiskers .whisker {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-right: 12px solid transparent;
        border-left: 70px solid #917972;
        border-top: 12px solid transparent;
        transform: rotate(-35deg);
      }
      .whisker.left1 {
        top: 70%;
      }
      .whisker.left2 {
        top: 80%;
      }
      .whisker.left3 {
        top: 88%;
      }
      .whiskers .whisker.right1 {
        top: 70%;
        right: 0%;
        transform: rotate(205deg);
      }
      .whiskers .whisker.right2 {
        top: 80%;
        right: 0%;
        transform: rotate(205deg);
      }
      .whiskers .whisker.right3 {
        top: 88%;
        right: 0%;
        transform: rotate(205deg);
      }
    `
    writeCode('',code)
}.call()